<!DOCTYPE html>
<html>
  <head>
    <meta name="screen-orientation" content="portrait" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
    />
    <title>年会抽奖小程序</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
      }

      .wall {
        width: 100%;
        height: 100%;
        background-image: url(./img/icon-wall.jpg);
        background-color: #121936;
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
        overflow: scroll;
      }

      #main {
        -webkit-transition: all 1s;
        transition: all 1s;
      }

      .mask {
        -webkit-filter: blur(5px);
        filter: blur(5px);
      }

      ::-webkit-scrollbar {
        display: none;
      }

      .result-title {
        text-align: center;
        color: #4de7c8;
        font-size: 45px;
        font-weight: bold;
        margin-top: 100px;
        font-family: "幼圆";
      }

      .result-list {
        text-align: center;
        color: #4de7c8;
        font-size: 25px;
        line-height: 50px;
        margin-top: 50px;
        margin-bottom: 50px;
        font-family: "幼圆";
      }

      .prize-name {
        font-size: 35px;
        font-weight: bold;
        color: #ff0000;
      }

      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="main" class="wall" v-cloak>
      <div class="result-title">获奖名单</div>
      <div class="result-list" v-for="(value,key) in results" :key="key">
        <div class="prize-name">{{key}}</div>
        <div v-for="item in value">{{item.name}} {{item.phone}}</div>
      </div>
    </div>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript">
      const app = new Vue({
        el: "#main",
        data: {
          results: {},
        },
        created() {
          const winnerListStr = localStorage.getItem("winnerList");
          if (winnerListStr !== null) {
            const winnerList = JSON.parse(winnerListStr);
            this.results = winnerList;
          }
        },
      });
    </script>
  </body>
</html>
